<template>
  <div class="mail-setting-page">
    <div class="setting-page-body">
      <div class="setting-part-divider"></div>
      <div class="setting-part-title">显示</div>
      <div class="setting-item-wrap mail-setting-themes">
        <div class="setting-item-row setting-row-top-align">
          <div class="setting-item-name">
            <span>主题</span>
          </div>
          <div class="setting-theme-cards">
            <!-- 动态绑定 selected 类，根据当前主题是否匹配来决定是否添加 -->
            <div
              v-for="(theme, index) in themes"
              :key="index"
              class="mail-setting-preview-card setting-theme-card"
              :class="{ 'preview-card-selected': currentTheme === theme.name }"
              @click="switchTheme(theme.name)"
            >
              <div class="preview-card-content">
                <div
                  :class="
                    'setting-theme-card-content setting-theme-' + theme.name
                  "
                ></div>
              </div>
              <div class="preview-card-radio">
                <div class="preview-card-radio-icon"></div>
                <div class="preview-card-radio-text">
                  <span>{{ theme.label }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";

export default defineComponent({
  setup() {
    const themes = ref([
      { name: "default", label: "默认" },
      { name: "sky", label: "晴空" },
      { name: "bamboo", label: "青竹" },
      { name: "ink", label: "沉墨" },
      { name: "turquoise", label: "松石" },
      { name: "firework", label: "花火" },
      { name: "calamus", label: "菖蒲" },
      // 可以添加更多主题
    ]);

    // 从 localStorage 中读取主题信息，如果没有则使用默认主题
    const storedTheme = localStorage.getItem("selectedTheme");
    const currentTheme = ref(storedTheme || "default");

    const switchTheme = (theme: string) => {
      currentTheme.value = theme;
      const body = document.body;
      body.classList.remove(...themes.value.map((t) => `page-theme-${t.name}`));
      body.classList.add(`page-theme-${theme}`);

      // 确保类名已经应用到 DOM 上之后再加载 CSS 文件
      requestAnimationFrame(() => {
        const existingLink = document.getElementById(
          "theme-style"
        ) as HTMLLinkElement | null;
        const cacheBuster = `?v=${Date.now()}`; // 添加时间戳
        if (existingLink) {
          existingLink.href = `/assets/themes/${theme}.css${cacheBuster}`;
        } else {
          const link = document.createElement("link");
          link.id = "theme-style";
          link.rel = "stylesheet";
          link.href = `/assets/themes/${theme}.css${cacheBuster}`;
          document.head.appendChild(link);
        }
      });

      // 将新的主题信息保存到 localStorage 中
      localStorage.setItem("selectedTheme", theme);
    };

    onMounted(() => {
      // 页面加载时应用存储的主题
      switchTheme(currentTheme.value);
    });

    return {
      themes: themes.value,
      currentTheme,
      switchTheme,
    };
  },
});
</script>

<style scoped>
/* 之前的样式代码保持不变 */
.mail-setting-page .setting-part-title {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  height: 70px;
  color: var(--base_gray_100);
}

.mail-setting-page .setting-part-divider {
  width: 100%;
  height: 1px;
  background: var(--base_gray_007);
}

.mail-setting-page .setting-item-wrap {
  padding-bottom: 24px;
  box-sizing: border-box;
}

.mail-setting-themes {
  --theme-reddot-icon: url(https://res.wx.qq.com/t/webmail/webmail/res/static/images/mail/projects/web/containers/Setting/GeneralTab/UI/Themes/theme-red-dot-default.2d1631b.svg);
}

.mail-setting-page .setting-item-row {
  display: flex;
  align-items: center;
  padding-left: 152px;
}

.mail-setting-page .setting-item-row.setting-row-top-align {
  align-items: flex-start;
}

.mail-setting-page .setting-item-name {
  font-size: 14px;
  line-height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-start;
  width: 152px;
  height: 36px;
  margin-left: -152px;
  color: var(--base_gray_100);
  padding: 8px 12px 8px 0;
  box-sizing: border-box;
}

.mail-setting-themes .setting-theme-cards {
  margin-top: -12px;
  max-width: 912px;
}

.mail-setting-themes .setting-theme-cards .setting-theme-card {
  margin-top: 12px;
}

.mail-setting-preview-card {
  --border-color: var(--base_gray_010);
  --border-hover: var(--base_gray_015);
  --border-active: var(--base_gray_020);
  --radio-border-width: 1px;
  --radio-bg: var(--base_white_100);
  --radio-bg-hover: var(--base_gray_005);
  --radio-bg-active: var(--base_gray_010);
  --radio-border-color: var(--base_gray_040);
  --radio-border-hover: var(--base_gray_050);
  --radio-border-active: var(--base_gray_050);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 140px;
  height: 95px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-sizing: border-box;
  margin-right: 12px;
  overflow: hidden;
}

.mail-setting-preview-card.preview-card-selected {
  --border-color: var(--theme_primary);
  --radio-border-width: 5px;
  --radio-border-color: var(--theme_primary);
}

.mail-setting-preview-card.preview-card-selected::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  bottom: -1px;
  border-radius: 6px;
  border: 2px solid var(--border-color);
}

.mail-setting-preview-card .preview-card-content {
  flex-grow: 1;
}

.mail-setting-themes
  .setting-theme-cards
  .setting-theme-card-content.setting-theme-default {
  background-image: url(https://res.wx.qq.com/t/webmail/webmail/res/static/images/mail/projects/web/containers/Setting/GeneralTab/UI/Themes/theme_default.1cab96d.png);
}

.mail-setting-themes
  .setting-theme-cards
  .setting-theme-card-content.setting-theme-sky {
  background-image: url(https://res.wx.qq.com/t/webmail/webmail/res/static/images/mail/projects/web/containers/Setting/GeneralTab/UI/Themes/theme_sky.44bff10.svg);
}

.mail-setting-themes
  .setting-theme-cards
  .setting-theme-card-content.setting-theme-bamboo {
  background-image: url(https://res.wx.qq.com/t/webmail/webmail/res/static/images/mail/projects/web/containers/Setting/GeneralTab/UI/Themes/theme_bamboo.c6be1ed.svg);
}

.mail-setting-themes
  .setting-theme-cards
  .setting-theme-card-content.setting-theme-turquoise {
  background-image: url(https://res.wx.qq.com/t/webmail/webmail/res/static/images/mail/projects/web/containers/Setting/GeneralTab/UI/Themes/theme_turquoise.f10f940.svg);
}

.mail-setting-themes
  .setting-theme-cards
  .setting-theme-card-content.setting-theme-firework {
  background-image: url(https://res.wx.qq.com/t/webmail/webmail/res/static/images/mail/projects/web/containers/Setting/GeneralTab/UI/Themes/theme_fireworks.727f25b.svg);
}

.mail-setting-themes
  .setting-theme-cards
  .setting-theme-card-content.setting-theme-ink {
  background-image: url(https://res.wx.qq.com/t/webmail/webmail/res/static/images/mail/projects/web/containers/Setting/GeneralTab/UI/Themes/theme_ink.ab3a2fe.svg);
}

.mail-setting-themes
  .setting-theme-cards
  .setting-theme-card-content.setting-theme-calamus {
  background-image: url(https://res.wx.qq.com/t/webmail/webmail/res/static/images/mail/projects/web/containers/Setting/GeneralTab/UI/Themes/theme_calamus.c93ef81.svg);
}

.mail-setting-themes .setting-theme-cards .setting-theme-card-content {
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.mail-setting-preview-card.preview-card-selected .preview-card-radio {
  padding: 6px 0 6px 10px;
}

.mail-setting-preview-card .preview-card-radio {
  display: flex;
  align-items: center;
  height: 28px;
  border-top: 1px solid var(--base_gray_010);
  padding-left: 10px;
  box-sizing: border-box;
}

.mail-setting-preview-card .preview-card-radio .preview-card-radio-icon {
  width: 16px;
  height: 16px;
  border: var(--radio-border-width) solid var(--radio-border-color);
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--radio-bg);
}

.mail-setting-preview-card .preview-card-radio .preview-card-radio-text {
  font-size: 14px;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
  color: var(--base_gray_100);
  padding-left: 8px;
}
</style>
